<template>
  <!-- 获取state中数据直接使用： -->
  <h2>当前计数：{{ $store.state.counter }}</h2>

  <!-- getters直接使用： -->
  <h2>当前计数加倍：{{ $store.getters.doubleCounter }}</h2>
  <h2>{{ $store.getters.calCounter }}</h2>

  <!-- mutations直接使用一： -->
  <!-- <button @click="$store.commit('decrement')">-1</button> -->
  <!-- <button @click="$store.commit('increment')">+1</button> -->
  <!-- mutations直接使用二： -->
  <button @click="sub">-1</button>
  <button @click="add">+1</button>

  <hr />

  <h3>延时一秒</h3>
  <!-- actions直接使用： -->
  <button @click="$store.dispatch('decrementAsyn')">-1</button>
  <button @click="$store.dispatch('incrementAsyn')">+1</button>

  <hr />
</template>

<script>
export default {
  methods: {
    // mutations直接使用方法二
    sub() {
      this.$store.commit("decrement")
    },
    add() {
      this.$store.commit("increment")
    },
  },
}
</script>

<style></style>
